﻿{% extends 'base.html' %}
{% load staticfiles %}
{% load tags %}
{% block css %}
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>Cloud Admin | Dynamic Tables</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" type="text/css" href="{% static 'css/cloud-admin.css' %}" >
	<link rel="stylesheet" type="text/css"  href="{% static 'css/themes/default.css' %}" id="skin-switcher" >
	<link rel="stylesheet" type="text/css"  href="{% static 'css/responsive.css' %}" >
	
	<link href="{% static 'font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
	<!-- JQUERY UI-->
	<link rel="stylesheet" type="text/css" href="{% static 'js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css' %}" />
	<!-- DATE RANGE PICKER -->
	<link rel="stylesheet" type="text/css" href="{% static 'js/bootstrap-daterangepicker/daterangepicker-bs3.css' %}" />
	<!-- DATA TABLES -->
	<link rel="stylesheet" type="text/css" href="{% static 'js/datatables/media/css/jquery.dataTables.min.css' %}" />
	<link rel="stylesheet" type="text/css" href="{% static 'js/datatables/media/assets/css/datatables.min.css' %}" />
	<link rel="stylesheet" type="text/css" href="{% static 'js/datatables/extras/TableTools/media/css/TableTools.min.css' %}" />
	<!-- FONTS -->
	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

{% endblock css %}
	
{% block content %}
	<div id="main-content">
		<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
		<div class="modal fade" id="box-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
			  <div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				  <h4 class="modal-title">Box Settings</h4>
				</div>
				<div class="modal-body">
				  Here goes box setting content.
				</div>
				<div class="modal-footer">
				  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				  <button type="button" class="btn btn-primary">Save changes</button>
				</div>
			  </div>
			</div>
		  </div>
		<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
		<div class="container">
			<div class="row">
				<div id="content" class="col-lg-12">
					<!-- PAGE HEADER-->
					<div class="row">
						<div class="col-sm-12">
							<div class="page-header">
								<!-- STYLER -->
								
								<!-- /STYLER -->
								<!-- BREADCRUMBS -->
								<ul class="breadcrumb">
									<li>
										<i class="fa fa-home"></i>
										<a href="index.html">Home</a>
									</li>
									<li>
										<a href="#">Tables</a>
									</li>
									<li>Dynamic Tables</li>
								</ul>
								<!-- /BREADCRUMBS -->
								<div class="clearfix">
									<h3 class="content-title pull-left">Dynamic Tables</h3>
								</div>
								<div class="description">Dynamic Tables and Modals</div>
							</div>
						</div>
					</div>
					<!-- /PAGE HEADER -->
					<!-- DATA TABLES -->
					<div class="row">
						<div class="col-md-12">
							<!-- BOX -->
							<div class="box border green">
								<div class="box-title">
									<h4><i class="fa fa-table"></i>Dynamic Data Tables</h4>
									<div class="tools hidden-xs">
										<a href="#box-config" data-toggle="modal" class="config">
											<i class="fa fa-cog"></i>
										</a>
										<a href="javascript:;" class="reload">
											<i class="fa fa-refresh"></i>
										</a>
										<a href="javascript:;" class="collapse">
											<i class="fa fa-chevron-up"></i>
										</a>
										<a href="javascript:;" class="remove">
											<i class="fa fa-times"></i>
										</a>
									</div>
								</div>
								<div class="box-body">
									<table id="datatable1" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">

                                        <thead>
                                            <tr>
                                                <th>订单编号</th>
                                                <th>客户姓名</th>
                                                <th>理发员工</th>
                                                <th>洗发员工</th>
                                                <th>订单时间</th>
                                                <th>订单金额</th>
                                            </tr>
                                        </thead>
                                        {% for item in page.object_list %}
                                            {{ item.order_client_name.id }}
                                            <tbody>

                                                <tr class="gradeU">
                                                    <td>{{ item.uid }}</td>
                                                    <td><a href="/order/order_sort/?userid={{ item.order_client_name.id }}&?user_type=1">{{ item.order_client_name.client_username }}</a></td>
                                                    <td><a href="/order/order_sort/?userid={{ item.order_havehaircut_name.id }}&?user_type=2">{{ item.order_havehaircut_name.username }}</a></td>
                                                    <td><a href="/order/order_sort/?userid={{ item.order_washhair_name.id }}&?user_type=2">{{ item.order_washhair_name.username }}</a></td>
                                                    <td>{{ item.times }}</td>
                                                    <td>{{ item.order_money }}</td>
                                                </tr>
                                            </tbody>
                                        {% endfor %}

									</table>
                                   {% divide_page curr_page p 'order:orders' request.get_full_path %}
							</div>
							<!-- /BOX -->
						</div>
					</div>
					
				</div><!-- /CONTENT-->
			</div>
		</div>
	</div>
{% endblock content %}



{% block js %}
	<script src="{% static 'js/jquery/jquery-2.0.3.min.js' %}"></script>
	<!-- JQUERY UI-->
	<script src="{% static 'js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js' %}"></script>
	<!-- BOOTSTRAP -->
	<script src="{% static 'bootstrap-dist/js/bootstrap.min.js' %}"></script>
	
		
	<!-- DATE RANGE PICKER -->
	<script src="{% static 'js/bootstrap-daterangepicker/moment.min.js' %}"></script>
	
	<script src="{% static 'js/bootstrap-daterangepicker/daterangepicker.min.js' %}"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="{% static 'js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js' %}"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript" src="{% static 'js/jQuery-BlockUI/jquery.blockUI.min.js' %}"></script>
	<!-- DATA TABLES -->
	<script type="text/javascript" src="{% static 'js/datatables/media/js/jquery.dataTables.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/datatables/media/assets/js/datatables.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/datatables/extras/TableTools/media/js/TableTools.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/datatables/extras/TableTools/media/js/ZeroClipboard.min.js' %}"></script>
    <script src="{% static 'js/flot/excanvas.min.js' %}"></script>
	<!-- COOKIE -->
	<script type="text/javascript" src="{% static 'js/jQuery-Cookie/jquery.cookie.min.js' %}"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="{% static 'js/script.js' %}"></script>
	<script>
		jQuery(document).ready(function() {		
			App.setPage("dynamic_table");  //Set current page
			App.init(); //Initialise plugins and elements
		});
	</script>
	<!-- /JAVASCRIPTS -->
{% endblock js %}